<template>
  <div>
    <el-row>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统">
              <el-select v-model="form.system1.systemId" @change="systemId1Change" filterable clearable>
                <el-option v-for="item in systemList" :label="item.Name" :key="item.ID" :value="item.ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据表">
              <el-select style="width: 70%" v-model="form.system1.tableId" filterable clearable>
                <el-option v-for="item in tableList1" :label="item.Name+'('+item.Describe+')'" :key="item.ID"
                           :value="item.ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="selectTable1">选择</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统">
              <el-select v-model="form.system2.systemId" @change="systemId2Change" filterable clearable>
                <el-option v-for="item in systemList" :label="item.Name" :key="item.ID" :value="item.ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据表">
              <el-select style="width: 70%" v-model="form.system2.tableId" filterable clearable>
                <el-option v-for="item in tableList2" :label="item.Name+'('+item.Describe+')'" :key="item.ID"
                           :value="item.ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="selectTable2">选择</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" :offset="18">
            <el-button type="primary" @click="compare">对比</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col :span="8">
        <el-header>
          数据表1
        </el-header>
        <el-table :data="columnList1"
                  border
                  fit
                  highlight-current-row
                  max-height="600px"
                  style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" label-width="120px" class="demo-table-expand">
                <el-form-item label="数据列名">
                  <span>{{ props.row.Name }}</span>
                </el-form-item>
                <el-form-item label="数据列描述">
                  <span>{{ props.row.Describe }}</span>
                </el-form-item>
                <el-form-item label="数据类型">
                  <span>{{ props.row.Type }}</span>
                </el-form-item>
                <el-form-item label="是否主键">
                  <span>{{ props.row.IsMain }}</span>
                </el-form-item>
                <el-form-item label="是否允许为空">
                  <span>{{ props.row.IsEmptyable }}</span>
                </el-form-item>
                <el-form-item label="字典类型">
                  <span>{{ props.row.DictType }}</span>
                </el-form-item>
                <el-form-item label="字典子系统">
                  <span>{{ props.row.SubDictSystem }}</span>
                </el-form-item>
                <el-form-item label="字典组标识">
                  <span>{{ props.row.DictGroupFlag }}</span>
                </el-form-item>
                <el-form-item label="值对应字典列">
                  <span>{{ props.row.DictColumn }}</span>
                </el-form-item>
                <el-form-item label="字典子类型">
                  <span>{{ props.row.SubDictType }}</span>
                </el-form-item>
                <el-form-item label="数据列大小">
                  <span>{{ props.row.ColumnSize }}</span>
                </el-form-item>
                <el-form-item label="数据小数位">
                  <span>{{ props.row.ColumnSuffix }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="数据列名" prop="Name" sortable>

          </el-table-column>
          <el-table-column label="数据列描述" prop="Describe" sortable show-tooltip-when-overflow></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-header>
          比对结果
        </el-header>
        <el-table :data="compareList"
                  border
                  fit
                  highlight-current-row
                  max-height="600px"
                  style="width: 100%;">

          <el-table-column label="数据列名" prop="Name" sortable>

          </el-table-column>
          <el-table-column label="对比结果" prop="CompareType" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.CompareType === enums.compareType.SAME" style="color: green">相同</span>
              <span v-if="scope.row.CompareType === enums.compareType.LEFT_MORE" style="color: lightcoral">来自数据表1</span>
              <span v-if="scope.row.CompareType === enums.compareType.RIGHT_MORE" style="color: darkred">来自数据表2</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-header>
          数据表2
        </el-header>
        <el-table :data="columnList2"
                  border
                  fit
                  highlight-current-row
                  max-height="600px"
                  style="width: 100%;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" label-width="120px" class="demo-table-expand">
                <el-form-item label="数据列名">
                  <span>{{ props.row.Name }}</span>
                </el-form-item>
                <el-form-item label="数据列描述">
                  <span>{{ props.row.Describe }}</span>
                </el-form-item>
                <el-form-item label="数据类型">
                  <span>{{ props.row.Type }}</span>
                </el-form-item>
                <el-form-item label="是否主键">
                  <span>{{ props.row.IsMain }}</span>
                </el-form-item>
                <el-form-item label="是否允许为空">
                  <span>{{ props.row.IsEmptyable }}</span>
                </el-form-item>
                <el-form-item label="字典类型">
                  <span>{{ props.row.DictType }}</span>
                </el-form-item>
                <el-form-item label="字典子系统">
                  <span>{{ props.row.SubDictSystem }}</span>
                </el-form-item>
                <el-form-item label="字典组标识">
                  <span>{{ props.row.DictGroupFlag }}</span>
                </el-form-item>
                <el-form-item label="值对应字典列">
                  <span>{{ props.row.DictColumn }}</span>
                </el-form-item>
                <el-form-item label="字典子类型">
                  <span>{{ props.row.SubDictType }}</span>
                </el-form-item>
                <el-form-item label="数据列大小">
                  <span>{{ props.row.ColumnSize }}</span>
                </el-form-item>
                <el-form-item label="数据小数位">
                  <span>{{ props.row.ColumnSuffix }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="数据列名" prop="Name" sortable>

          </el-table-column>
          <el-table-column label="数据列描述" prop="Describe" sortable show-tooltip-when-overflow></el-table-column>
        </el-table>
      </el-col>
    </el-row>


  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      list: [],
      count: 0,
      form: {
        system1: {
          systemId: null,
          tableId: null
        },
        system2: {
          systemId: null,
          tableId: null
        }
      },
      enums:{
        compareType:{
          SAME: 1,
          LEFT_MORE: 2,
          RIGHT_MORE:3
        }
      },
      systemList: [],
      tableList1: [],
      tableList2: [],
      columnList1: [],
      columnList2: [],
      compareList: []
    }
  },
  mounted() {
    this.getSystemList()
  },
  methods: {
    getSystemList() {
      this.$axios
          .get("/api/system/list", {
            params: {}
          }, {})
          .then((res) => {
            if (res.data.code === 200) {
              this.systemList = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
            console.log(res);
          });
    },
    systemId1Change() {
      this.form.system1.tableId = null
      var postData = {}
      postData.systemId = this.form.system1.systemId
      this.$axios
          .get("/api/table/list", {params: postData}, {})
          .then((res) => {
            if (res.data.code === 200) {
              this.tableList1 = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
            console.log(res);
          });
    },
    systemId2Change() {
      this.form.system2.tableId = null
      var postData = {}
      postData.systemId = this.form.system2.systemId
      this.$axios
          .get("/api/table/list", {params: postData}, {})
          .then((res) => {
            if (res.data.code === 200) {
              this.tableList2 = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
            console.log(res);
          });
    },
    selectTable1() {
      if (!this.form.system1.tableId) {
        this.$message.error("请选择数据表");
        return
      }
      var postData = {}
      postData.tableId = this.form.system1.tableId
      this.$axios
          .get("/api/column/list", {params: postData}, {})
          .then((res) => {
            if (res.data.code === 200) {
              this.columnList1 = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
            console.log(res);
          });
    },
    selectTable2() {
      if (!this.form.system2.tableId) {
        this.$message.error("请选择数据表");
        return
      }
      var postData = {}
      postData.tableId = this.form.system2.tableId
      this.$axios
          .get("/api/column/list", {params: postData}, {})
          .then((res) => {
            if (res.data.code === 200) {
              this.columnList2 = res.data.data
            } else {
              this.$message.error(res.data.msg)
            }
            console.log(res);
          });
    },
    compare() {
      if (!this.columnList1) {
        this.$message.error("请选择数据表1");
        return
      }
      if (!this.columnList2) {
        this.$message.error("请选择数据表2");
        return
      }
      this.compareList = []
      for(let item of this.columnList1){
        if(this.isExist(item.Name, this.columnList2)){
          if(!this.isExist(item.Name, this.compareList)){
            let i = {}
            Object.assign(i, item)
            i.CompareType = this.enums.compareType.SAME
            this.compareList.push(i)
          }
        }else{
          if(!this.isExist(item.Name, this.compareList)){
            let i = {}
            Object.assign(i, item)
            i.CompareType = this.enums.compareType.LEFT_MORE
            this.compareList.push(i)
          }
        }
      }
      for(let item of this.columnList2){
        if(this.isExist(item.Name, this.columnList1)){
          if(!this.isExist(item.Name, this.compareList)){
            let i = {}
            Object.assign(i, item)
            i.CompareType = this.enums.compareType.SAME
            this.compareList.push(i)
          }
        }else{
          if(!this.isExist(item.Name, this.compareList)){
            let i = {}
            Object.assign(i, item)
            i.CompareType = this.enums.compareType.RIGHT_MORE
            this.compareList.push(i)
          }
        }
      }
    },
    isExist(name, list){
      for(var item of list){
        if(item.Name === name){
          return true
        }
      }
      return false
    }
  }
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>
